<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/login-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent" title="登录">
			<view slot="left">
				<nav-left></nav-left>
			</view>
		</uv-navbar>
		<image class="logo-image mt-30 block mx-auto" src="/static/login-logo.png"></image>

		<view class="list-container">
			<view class="list-item fs-32 flex-column flex-center">
				<view>账号</view>
				<view class="input-wrap">
					<uv-input border="none" placeholder="请输入您的账号" placeholderStyle="#C7C7C7" fontSize="32rpx"
						v-model="username"></uv-input>
				</view>
			</view>
			<view class="list-item fs-32 flex-column flex-center">
				<view>密码</view>
				<view class="input-wrap">
					<uv-input border="none" placeholder="请输入您的密码" placeholderStyle="#C7C7C7" fontSize="32rpx"
						type="password" v-model="password"></uv-input>
				</view>
			</view>
			<view class="list-item fs-32 flex-column flex-center" v-if="captchaEnabled">
				<view>验证码</view>
				<view class="input-wrap flex--center">
					<uv-input border="none" placeholder="请输入验证码" placeholderStyle="#C7C7C7" fontSize="32rpx"
						v-model="code"></uv-input>
					<image class="captcha-image" :src="captchaUrl" @click="handleGetCaptchaImage"></image>
				</view>
			</view>

			<!-- <view class="flex-end">
        <view class="color-primary" style="margin-top: 25rpx">忘记密码</view>
      </view> -->
			<view class="mim">
				<switch class="sw" :checked='isshow'  type='checkbox' @change="switch2Change" >
				 记住密码
				</switch>
			</view>
			<view class="button-wrap">
				<button class="button-item uv-reset-button bg-primary color-f flex-center-center fs-34 fw-700"
					@click="handleSubmit">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:true,
				captchaEnabled: false, // 验证码是否启用
				captchaUrl: '', // 验证码图片地址
				username: '', // 登录用户名称
				password: '', // 登录密码
				code: '', // 验证码（验证码启用时必传）
				uuid: '', // 验证码UUID（验证码启用时必传）
			}
		},
		onShow() {
			// const roleType = uni.getStorageSync('roleType')
			// if (!roleType) {
			// 	uni.redirectTo({
			// 		url: '/pages/login/role'
			// 	})
			// 	return
			// }
			this.handleGetCaptchaImage()
			if(uni.getStorageSync('username') && uni.getStorageSync('password')){
				this.username = uni.getStorageSync('username')
				this.password = uni.getStorageSync('password')
			}
		},
		methods: {
			switch2Change(e){
				this.isshow = e.detail.value
			},
			// 获取图形验证码信息
			async handleGetCaptchaImage() {
				const result = await this.$api.getCaptchaImage()
				this.captchaEnabled = result.captchaEnabled
				if (this.captchaEnabled) {
					this.captchaUrl = 'data:image/gif;base64,' + result.img
					this.uuid = result.uuid
				} else {
					this.captchaUrl = ''
					this.uuid = ''
				}
				this.code = ''
			},
			// 登录
			async handleSubmit() {
				if (!this.username.trim()) return uni.showToast({
					title: '请输入您的账号',
					icon: 'none'
				})
				if (!this.password.trim()) return uni.showToast({
					title: '请输入您的密码',
					icon: 'none'
				})
				if (this.captchaEnabled && !this.code.trim()) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				const requestData = {
					username: this.username,
					password: this.password,
				}
				if (this.captchaEnabled) {
					requestData.code = this.code
					requestData.uuid = this.uuid
				}
				if(this.isshow){
					uni.setStorageSync('username',requestData.username)
					uni.setStorageSync('password',requestData.password)
				}else{
					uni.removeStorageSync('username')
					uni.removeStorageSync('password')
				}
				uni.showLoading({
					title:'登录中...',
					mask: true
				})
				const result = await this.$api.postLogin(requestData).catch((error) => {
					if (error.code === 500) {
						this.handleGetCaptchaImage()
					}
				})
				if (result) {
					uni.hideLoading()
					this.$store.commit('SET_TOKEN', result.token)
					const staffInfoResult = await this.$api.getStaffInfo()
					const staffRole = staffInfoResult.roles[0]
					if (staffRole !== 'shengchan' && staffRole !== 'wuliu') {
						this.$store.commit('SET_TOKEN', '')
						this.handleGetCaptchaImage()
						uni.showToast({
							title: '没有权限，请联系平台',
							icon: 'none'
						})
						return
					}
					this.$store.commit('SET_TOKEN', result.token)
					this.$store.commit('SET_STAFF_ROLE', staffRole)
					this.$store.commit('SET_STAFF_INFO', staffInfoResult.user)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
					// if(uni.getStorageSync('roleType') === 'staff' && staffRole === 'shengchan'){
					// 	uni.reLaunch({
					// 		url: '/pages/index/Produce'
					// 	})
					// }else if(uni.getStorageSync('roleType') === 'staff' && staffRole === 'wuliu'){
					// 	uni.reLaunch({
					// 		url: '/pages/index/Logistics'
					// 	})
					// }
					// <!-- 客户端 -->
					// <Customer ref="customerRef" v-if="roleType === 'customer'"></Customer>
					
					// <!-- 员工端 生产端 -->
					// <Produce ref="produceRef" v-if="roleType === 'staff' && staffRole === 'shengchan'"></Produce>
					
					// <!-- 员工端 物流端 -->
					// <Logistics ref="logisticsRef" v-if="roleType === 'staff' && staffRole === 'wuliu'"></Logistics>
					// uni.reLaunch({
					// 	url: '/pages/index/Produce'
					// })
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.logo-image {
		width: 320rpx;
		height: 320rpx;
	}

	.list-container {
		margin: 62rpx 62rpx 0 58rpx;
	}

	.list-item {
		height: 185rpx;
		border-bottom: 2rpx solid #dcdcdc;
	}

	.input-wrap {
		margin-top: 34rpx;
		margin-left: -8rpx;
		margin-right: -8rpx;
	}

	.captcha-image {
		width: 200rpx;
		height: 76rpx;
	}

	.button-wrap {
		margin-top: 80rpx;
	}

	.button-item {
		width: 622rpx;
		height: 80rpx;
		border-radius: 14rpx;
	}
	.mim{
		margin-top: 20rpx;
		font-size: 30rpx;
		.sw{
			display: flex;
			align-items: center;
		}
	}
</style>